<template>
	<view class="content" @touchmove.stop.prevent="moveHandle">
		<image src="../../static/indexImg/indexTop.png" class="imgTop" />
		<view class="title">welcome！</view>
		<view class="title2">Easily and quickly</view>
		<view class="title2">edit your photos</view>
		<view class="conImg" @click="gotoStart">
			<image src="../../static/indexImg/portrait.png" style="width: 100%;height: 100%;"></image>
			<view class="start">start</view>
		</view>
		<view class="indexBottom" @click="gotoStore">
			<text style="font-family:BungeeRegular;">more coins</text>
			<view class="gotocoins">
				<image src="../../static/indexImg/indexBottom.png" style="width: 82rpx;height: 82rpx;"></image>
			</view>
		</view>
<!-- 		<view class="indexTip" @touchmove.stop.prevent="moveHandle">
			<view class="Tip" v-if="showTip"><image @click="closeTip" src="../../static/indexImg/close3.png" style="width: 42rpx;height: 42rpx;position: absolute;top: 24rpx;right: 24rpx;" /> <view>Welcome to this app! The main function is that you can add watermarks, stickers and text editing operations to the pictures, stickers and text can be dragged and zoomed. The main function is to add watermarks, stickers and text, which can be dragged and zoomed. If necessary, you can spend 10 coins to save the edited image to your album.</view></view>
		</view> -->
	</view>
</template>
 <script>
	export default {
		data() {
			return {
				showTip: true
			}
		},
		onLoad() {
			this.showTip = true
			if(!uni.getStorageSync('isFirst')) {
				uni.setStorageSync( 'PicEditIcon', 20)
				uni.setStorageSync( 'isFirst', 1)
			}
		},
		methods: {
			moveHandle() {},
			gotoStart() {
				uni.navigateTo({
					url: '/pages/index/pic_Edit',
				})
			},
			gotoStore() {
				uni.navigateTo({
					url: '/pages/index/store',
				})
			},
			closeTip() {
				this.showTip = false
			}
		}
	}
</script>
<style scoped>
	@import url('../../static/fontFamily/stylesheet.css');
	.content {
		width: 100vw;
		min-height: 100vh;
		background: linear-gradient( 180deg, #010101 0%, #3C2EC7 100%);
		padding: 0 54rpx;
		box-sizing: border-box;
		font-family: BungeeRegular;
		color: #FFFFFF;
		padding-bottom: 190rpx;
		overflow: hidden;
	}
	.imgTop {
		width: 249rpx;
		height: 48rpx;
		margin-top: 142rpx;
	}
	.title {
		font-weight: 400;
		font-size: 76rpx;
		color: #BDB6FF;
		font-style: normal;
		text-transform: none;
		margin-top: 40rpx;
		line-height: 89rpx;
		margin-bottom: 26rpx;
	}	
	.title2 {
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 74rpx;
		color: #FFFFFF;
		line-height: 87rpx;
	}
	.conImg {
		width: 630rpx;
		height: 788rpx;
		/* background: #ffff; */
		border-radius: 40rpx;
		/* border: 12rpx solid #000000; */
		margin: 44rpx auto;
		overflow: hidden;
		position: relative;
	}
	.start {
		width: 290rpx;
		height: 128rpx;
		background: #FFFFFF;
		border-radius: 48rpx 0rpx 48rpx 0rpx;
		border-top: 12rpx solid #000000;
		border-left: 12rpx solid #000000;
		position: absolute;
		right: 12rpx;
		bottom: 12rpx;
		font-weight: 400;
		font-size: 76rpx;
		color: #000000;
		line-height: 128rpx;
		text-align: center;
		font-family: BungeeRegular;
	}
	.indexBottom {
		width: 100vw;
		font-family: Bungee-Regular;
		border-top: 12rpx solid #000000;
		height: 154rpx;
		padding-left: 54rpx;
		box-sizing: border-box;
		line-height: 154rpx;
		font-family: Bungee, Bungee;
		font-weight: 400;
		font-size: 68rpx;
		color: #FFFFFF;
		background-color: #473BC7;
		position: fixed;
		bottom: 0;
		left: 0;
	}
	.gotocoins {
		width: 190rpx;
		height: 190rpx;
		background: #21FFF2;
		border-top: 12rpx solid #000000;
		border-left: 12rpx solid #000000;
		position: absolute;
		right: 0;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.Tip {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 666rpx;
		background: rgba(255,255,255,1);
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		padding: 74rpx 44rpx 44rpx;
		box-sizing: border-box;
		font-weight: 400;
		font-size: 36rpx;
		color: #000000;
	}
	.indexTip {
		z-index: 999;
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
	}
</style>
